<script setup lang="ts">
import { Plus, Upload } from "@element-plus/icons-vue";
import { ref, reactive, defineEmits } from "vue";
import { list } from "./data";
const explainArr1 = reactive(list);
import Explains from "@/views/sponsor/info/explain.vue";
const deletes = index => {
  explainArr1.splice(index, 1);
};
const deletes1 = (index, chindIndex) => {
  const children = explainArr1[index]?.["children"] || [];
  children.splice(chindIndex, 1);
  explainArr1[index]["children"] = children;
};
const deletes2 = (index, chindIndex, grandsonIndex) => {
  const children =
    explainArr1[index]?.["children"][chindIndex]?.["children"] || [];
  children.splice(grandsonIndex, 1);
  explainArr1[index]["children"][chindIndex]["children"] = children;
};
const conClick = index => {
  const children = explainArr1[index]?.["children"] || [];
  children.push({
    title: "",
    contont: "",
    show: true,
    id: Date.now()
  });
  explainArr1[index]["children"] = children;
};
const conFrisClick = (index, chindindx) => {
  const children =
    explainArr1[index]?.["children"][chindindx]?.["children"] || [];
  children.push({
    title: "",
    contont: "",
    show: true,
    id: Date.now()
  });
  explainArr1[index]["children"][chindindx]["children"] = children;
};
import { useRouter } from "vue-router";
const router = useRouter();
let $emit = defineEmits(["submitClick"]);
</script>

<template>
  <div class="text-[20px] font-bold mt-[20px] mb-[20px] w-full">
    项目详情
    <el-button
      type="primary"
      class="float-right"
      plain
      :icon="Plus"
      size="small"
      @click="
        () => {
          explainArr1.push({
            title: '',
            contont: '',
            show: true,
            id: Date.now()
          });
        }
      "
      >新增</el-button
    >
  </div>
  <template v-for="(item, index) in explainArr1" :key="item.id">
    <Explains
      :title="item.title"
      :contont="item.contont"
      :show="item.show"
      @deletes="deletes(index)"
    >
      <template #btn>
        <el-button type="primary" link @click="conClick(index)"
          >新增子项</el-button
        >
      </template>
      <template v-for="(chind, chindindex) in item.children" :key="chind.id">
        <Explains
          :title="chind.title"
          :contont="chind.contont"
          :show="chind.show"
          class="pl-[25px] pr-[25px]"
          @deletes="deletes1(index, chindindex)"
        >
          <template #btn>
            <el-button
              type="primary"
              link
              @click="conFrisClick(index, chindindex)"
              >新增子项</el-button
            >
          </template>
          <template
            v-for="(grandson, grandsonIndex) in chind.children"
            :key="grandson.id"
          >
            <Explains
              :title="grandson.title"
              :contont="grandson.contont"
              :show="grandson.show"
              class="pl-[25px] pr-[25px]"
              @deletes="deletes2(index, chindindex, grandsonIndex)"
            >
            </Explains>
          </template>
        </Explains>
      </template>
    </Explains>
  </template>
  <div class="h-[40px]"></div>
  <div
    class="flex justify-center m-[10px] w-full p-[20px] bg-white shadow shadow-zinc-200 -left-[10px] relative"
  >
    <el-button @click="router.push({ name: 'projectApplication' })"
      >取消</el-button
    >
    <el-button @click="router.push({ name: 'projectApplication' })"
      >保存草稿</el-button
    >
    <el-button type="primary" @click="$emit('submitClick', 1)"
      >上一步</el-button
    >
    <el-button type="primary" @click="$emit('submitClick', 3)"
      >下一步</el-button
    >
  </div>
</template>

<style lang="scss" scoped></style>
